<template>
  <div class="app-container calendar-list-container">
    <div class="apply-query">
      <el-row class="filter-query">
        <el-col><span>{{$t('expensesStatisticsManage.expensesStatisticsMonth.queryCondition')}}</span></el-col>
      </el-row>
      <el-form :inline="true" :model="listQuery" label-width="120px" style="padding: 0 20px">
        <el-row style="padding-bottom: 10px">
          <el-col :span="4">
            <div class="w20">
              <div class="labelName">{{$t('expensesStatisticsManage.expensesStatisticsMonth.employUserId')}}</div>
              <el-autocomplete style="width: 100%" clearable v-model="listQuery.employUserName" :fetch-suggestions="getUserList" :placeholder="$t('expensesStatisticsManage.expensesStatisticsMonth.enterEmployUserId')"></el-autocomplete>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="w20">
              <div class="labelName">Category</div>
              <el-select clearable v-model="listQuery.bg" @change="changeBg" :placeholder="$t('placeholder.choose')">
                <el-option v-for="item in bgList" :key="item" :label="item" :value="item"></el-option>
              </el-select>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="w20">
              <div class="labelName">Account</div>
              <el-select clearable v-model="listQuery.bu" @change="changeBu" :placeholder="$t('placeholder.choose')">
                <el-option v-for="item in buList" :key="item" :label="item" :value="item"></el-option>
              </el-select>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="w20">
              <div class="labelName">{{$t('expensesStatisticsManage.expensesStatisticsMonth.timeCondition')}}</div>
              <el-date-picker style="width: 100%" format="yyyy-MM-dd" value-format="yyyy-MM-dd HH:mm:ss" v-model="listQuery.timeCondition" type="daterange" range-separator="-" :start-placeholder="$t('placeholder.startDate')" :end-placeholder="$t('placeholder.endDate')"></el-date-picker>
            </div>
          </el-col>
          <el-col :span="4" style="margin-top: 32px">
            <div class="yt-btn yt-btn-ys" @click="handleFilter">{{$t('button.search')}}</div>
            <div class="yt-btn btn" @click="reset">{{$t('button.reset')}}</div>
          </el-col>
        </el-row>
      </el-form>
    </div>

    <div class="data-list">
      <div class="list-content">
        <span>{{$t('expensesStatisticsManage.expensesStatisticsMonth.listTitle')}}</span>
      </div>
      <div class="list-operation">
        <!--新增-->
        <el-button class="yt-btn-ys" type="primary" @click="remit">{{$t('button.export')}}</el-button>
      </div>
      <div class="yt-dynamic-list">
        <div class="dynamic-title" :style="list.titleList.length >8 ?'width: ' + Number(list.titleList.length) * 120 + 'px;':'width: 100%;'">
          <div class="subset"  v-for="(i,index) in list.titleList">{{ i }}</div>
        </div>
        <div class="yt-dynamic-table" :style="list.titleList.length >8 ?'width: ' + Number(list.titleList.length) * 120 + 'px;':'width: 100%;'">
          <div v-for="(x,xIndex) in list.dataList" class="dynamic-box">
            <div v-format="'#,##0'" class="subset" v-for="(y,yIndex) in x">{{ y }}</div>
          </div>
        </div>
        <div class="dynamic-title" :style="list.titleList.length >8 ?'width: ' + Number(list.titleList.length) * 120 + 'px;':'width: 100%;'">
          <div class="subset" v-format="'#,##0'" v-for="(i,index) in list.countList">{{ i }}</div>
        </div>
      </div>
      <div style="text-align: center;padding: 20px;" v-if="this.list.titleList.length <= 0">{{title}}</div>
    </div>
  </div>
</template>

<script>
  import { selectBu, selectBg, listbgAndbu } from '@/api/bu/index';
  import { getUserInfoByName } from '@/api/dict/dictValue/index';
  import { statisticsByMouth } from '@/api/pmoReport/expensesStatisticsManage';
  import YtGetTemplateSelect from '@/components/Yt-template/getTemplateSelect.vue';
  import formatter from '@/utils/formatter';

  export default {
    name: 'expensesStatisticsMonth',
    components: {
      YtGetTemplateSelect,
      'dict-select': () => import('@/components/Dict/dictValueSelect')
    },
    data() {
      return {
        formatter,
        listAll: this.$store.getters.allDic,
        listMapAll: this.$store.getters.allMapDic,
        listQuery: {
          order: '', // 降序（desc）/升序（asc）
          orderBy: '', // 排序字段
          page: 1,
          limit: 10,
          employUserName: '',
          employUserId: '',
          bu: '',
          bg: '',
          formFillingStartTime: '',
          formFillingEndTime: '',
          timeCondition: []
        },
        total: 0,
        list: {
          titleList: [],
          dataList: []
        },
        title: this.$t('expensesStatisticsManage.expensesStatisticsMonth.noData'),
        buList: [],
        bgList: []
      };
    },
    mounted() {
      this.getQuery()
      this.changeBg(this.listQuery.bg)
      this.changeBu(this.listQuery.bu)
      if (this.listQuery.timeCondition.length > 0 || this.listQuery.employUserName !== '' || this.listQuery.employUserId !== '' || this.listQuery.bu !== '' || this.listQuery.bg !== '') {
        this.getList()
      }
    },
    methods: {
      getQuery() {
        const expensesStatisticsMonthListQuery = window.sessionStorage.getItem('expensesStatisticsMonthListQuery');
        if (expensesStatisticsMonthListQuery) {
          this.listQuery = JSON.parse(expensesStatisticsMonthListQuery);
        }
      },
      getBu() {
        selectBu().then(res => {
          this.buList = res.data;
        });
      },
      getBg() {
        selectBg().then(res => {
          this.bgList = res.data;
        });
      },
      changeBu(val) {
        // 联动bg
        if (val === '') {
          this.getBg()
        } else {
          listbgAndbu({ bu: val, bg: '' }).then(res => {
            this.bgList = res.data;
          });
        }
      },
      changeBg(val) {
        // 联动bu
        if (val === '') {
          this.getBu()
        } else {
          listbgAndbu({ bu: '', bg: val }).then(res => {
            this.buList = res.data;
          });
        }
      },
      setSales(item) {
        console.log(item, '(item)')
        this.listQuery.employUserName = item.username;
        this.listQuery.employUserId = item.value;
      },
      getUserList(queryString, cb) {
        // 获取员工编号
        getUserInfoByName({ username: queryString }).then(res => {
          this.userList = res.data.rows;
          for (let i = 0; i < this.userList.length; i++) {
            this.userList[i].value = this.userList[i].username;
          }
          cb(this.userList);
        });
      },
      reset() {
        this.listQuery = {
          order: '', // 降序（desc）/升序（asc）
          orderBy: '', // 排序字段
          page: 1,
          limit: 10,
          employUserName: '',
          employUserId: '',
          bu: '',
          bg: '',
          formFillingStartTime: '',
          formFillingEndTime: '',
          timeCondition: []
        };
        this.getList();
      },
      handleFilter() {
        this.getList();
      },
      handleSizeChange(val) {
        this.listQuery.limit = val;
        this.getList();
      },
      handleCurrentChange(val) {
        this.listQuery.page = val;
        this.getList();
      },
      remit() {
        if ((this.list.titleList && this.list.titleList.length > 0) || (this.list.dataList && this.list.dataList.length > 0) || (this.list.countList && this.list.countList.length > 0)) {
          const a = document.createElement('a');
          const href = '/api/admin/excel/exportMonthCount?employUserName=' + this.listQuery.employUserName + '&bu=' + this.listQuery.bu + '&bg=' + this.listQuery.bg + '&formFillingStartTime=' + this.listQuery.formFillingStartTime + '&formFillingEndTime=' + this.listQuery.formFillingEndTime + '&userId=' + this.$store.getters.info.id;
          a.download = Date.now();
          a.href = href;
          a.click();
        } else {
          this.$message.error(this.$t('expensesStatisticsManage.expensesStatisticsMonth.errorTip'));
        }
      },
      getList() {
        if (this.listQuery.timeCondition == null) {
          this.listQuery.formFillingStartTime = '';
          this.listQuery.formFillingEndTime = '';
        }
        if (this.listQuery.timeCondition && Array.isArray(this.listQuery.timeCondition) && this.listQuery.timeCondition.length === 2) {
          this.listQuery.formFillingStartTime = this.listQuery.timeCondition[0];
          this.listQuery.formFillingEndTime = this.listQuery.timeCondition[1];
        }
        statisticsByMouth(this.listQuery).then(res => {
          if (res.data.dataList) {
            this.list = res.data
          } else {
            this.list = { titleList: [], dataList: [] }
            this.title = this.$t('expensesStatisticsManage.expensesStatisticsMonth.noData')
          }
        });
      }
    },
    beforeDestroy() {
      window.sessionStorage.setItem('expensesStatisticsMonthListQuery', JSON.stringify(this.listQuery))
    }
  };
</script>
<style lang="scss" scoped>
  .yt-dynamic-list{
    border-right: 1px solid #ebeef5;
    overflow-x: auto;
    text-align: center;
  }
  .dynamic-title{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    .index{
      width: 60px;
      background-color: #f1f4f3;
      padding: 10px;
      text-align: center;
    }
    .subset{
      flex: 1;
      background-color: #f1f4f3;
      color: #212121;
      padding: 10px;
      font-size: 14px;
      word-break : break-all;
      overflow:hidden;
    }
  }
  .yt-dynamic-table {
    max-height: 450px;
    overflow: hidden auto;
    .dynamic-box{
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      width: 100%;
      .index{
        width: 60px;
        padding: 10px;
        text-align: center;
        font-size: 14px;
        border-left: 1px solid #ebeef5;
        border-bottom: 1px solid #ebeef5;
      }
      .subset{
        flex: 1;
        color: #212121;
        padding: 10px;
        font-size: 14px;
        border-left: 1px solid #ebeef5;
        border-bottom: 1px solid #ebeef5;
        word-break : break-all;
        overflow:hidden;
      }
    }
  }
  .list-contentg{
    color: #6dcaa8;
    height: 50px;
    line-height: 50px;
    border-bottom: solid 1px #d3d3d3;
    font-size: 18px;
    padding-left: 20px;
    margin: 0 -20px;
  }
  .list-content-type{
    width: 200px;
    position: absolute;
    top: 0;
    right: 20px;
    .list-content-textType{
      position: absolute;
      left: -65px;
      font-size: 12px;
      color: #212121;
    }
  }
</style>
